<!-- 帖子列表图片组件 目前用于热门帖子和postListItem-->
<script setup>
const props = defineProps({
  type: Number,
  media: Array,
  isTopPost: {
    type: Boolean,
    default: false,
  },
})
const video_cover_mode = window.config_global.video_cover_mode

</script>
<template>
  <!-- 视频 -->
  <section v-if="type === 2" class="w-28 h-20 flex-shrink-0 overflow-hidden flex-cc rounded-lg bg-[--fill-0] relative" :class="{ 'w-24': isTopPost }">
    <!-- 如果使用阿里云存储 -->
    <img
      v-if="video_cover_mode === 'aliyun'"
      :src="media[0] + '?x-oss-process=video/snapshot,t_0,f_jpg'"
      class="object-cover w-full h-full" />
    <!-- 如果使用七牛云存储 -->
    <img
      v-if="video_cover_mode === 'qiniu'"
      :src="media[0] + '?vframe/jpg/offset/1'"
      alt=""
      class="object-cover w-full h-full" />
    <!-- 如果使用本地存储 -->
    <img v-if="video_cover_mode === 'local'" src="/imgs/videoBg.jpg" class="object-cover w-full h-full" />

    <div class="absolute bottom-0 left-0 w-full h-full flex-cc bg-black/30">
      <PlayIcon class="w-10 h-10" />
    </div>
  </section>

  <!-- 长文 投票 普通帖子 -->
  <section v-else class="w-28 h-20 flex-shrink-0 overflow-hidden flex-cc rounded-lg bg-[--fill-2] relative" :class="{ 'w-24': isTopPost }">
    <div
      v-if="type === 4 || type === 3"
      class="absolute bottom-[5px] right-[6px] w-[32px] h-[16px] flex-cc bg-[#000000bb] text-[12px] text-white rounded-sm">
      {{ type === 4 ? '投票' : '长文' }}
    </div>
    <img v-if="media && media.length !== 0" :src="media[0]" alt="" class="object-cover w-full h-full" />
    <img v-else src="/imgs/withoutImg.svg" alt="" />
  </section>
</template>
